<template>
  <div class="menu-tree">
    <label v-for="list in menuInfo" :key="list.menuId+''">
      <el-submenu :index="list.menuId+''" v-if="list.children && list.menuType == 0">
        <template slot="title">
          <i :class="list.icon" v-if="list.menuType == 0"></i>
          <span>{{list.menuName}}</span>
        </template>
        <label>
          <side-menu-tree :menuInfo="list.children" :topMenuName="list.menuName" v-bind="$attrs" v-on="$listeners"></side-menu-tree>
        </label>
      </el-submenu>
      <el-menu-item v-else :index="list.menuUrl+''" @click="changeBreadInfo(topMenuName,list.menuName,list.menuUrl)">
        <i :class="list.icon"></i>
        <span slot="title">{{list.menuName}}</span>
      </el-menu-item>
    </label>
  </div>
</template>

<script>
export default {
  name: "sideMenuTree",
  props: ['menuInfo','topMenuName'],
  methods:{
    changeBreadInfo(curTopMenuName,curMenuName,menuUrl){
      this.$emit('changeBreadInfo',curTopMenuName,curMenuName,menuUrl);
    }
  }
}
</script>

<style scoped>

</style>
